<template>
    <div>
      <input type="button" value="点我" @click="flag = !flag">
      <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:after-enter="afterEnter">
        <div class="ball" v-show="flag"></div>
      </transition>
    </div>
</template>

<script>
export default {
  name: 'Order',
  data () {
    return {
      flag: false
    }
  },
  methods: {
    beforeEnter (el) {
      el.style.transform = 'translate(0,0)'
    },
    enter (el, done) {
      // el.offsetWidth
      el.style.transform = 'translate(100px,100px)'
      el.style.transition = 'all 1s ease'
      done()
    },
    afterEnter (el) {
      this.flag = !this.flag
    }
  }
}
</script>

<style scoped>
.ball {
    width: 50px;
    height: 50px;
    border-radius: 30px;
    background-color: red;
    position: absolute;
}
</style>
